<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
    <div id="header">
        <div class="container">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.php">书吧</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">网站首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li  class="active"><a href="detail.html">图书展示</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="shopCar.html">购物车</a></li>
                        <li><a href="addBooks.html">添加图书</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div id="wrap">
        <div class="container">
            <div class="col-xs-6" id="tp">
                <img id="file" src="" alt="">
            </div>
            <div class="col-xs-6">
                <h4 id="name">书香人和 【新华书店正版图书】</h4>
                <p>蔡玉洗，资深出版人，曾任江苏文艺出版社社长，《开卷》杂志主编。董宁文，《开卷》杂志执行主编。两人曾编辑出版多部作品。</p>
                <hr/>
                <div style="background-color: #ebebeb;">
                    <div class="panel-body">
                        <strong>作者</strong>：<span id="mingzi"><a href=""></a></span>
                    </div>
                    <div class="panel-body">
                        <strong>出版社</strong>：<span id="she"><a href=""></a></span>
                    </div>
                    <div class="panel-body">
                        <strong>出版时间</strong>：<span id="shijian"></span>
                    </div>
                    <div class="panel-body">
                        <strong>国际标准书号ISBN</strong>：<span id="isb"></span>

                    </div>
                    <div class="panel-body" id="youq">
                        <!--<strong>友情价格</strong>：<span class="price" id="qian"></span>-->
                    </div>
                </div>
                <div class="button">
                    <div class="btn btn-danger btn1" onclick="gouwu()">加入购物车</div>
                    <div class="btn btn-danger btn2">立即购买</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    var index= location.href.indexOf('?id=');//获取?id当前的位置
    var str = location.href.slice(index+4);//slice(index+4) 就是截取?id= 之后所有的东西

    $.ajax({
        type:'post',
        url:'detail.php',
        aysnc:true,
        dataType:'json',
        data:{
            dress:str
        },
        success:function (data) {
            document.querySelector(".col-xs-6 #mingzi").innerHTML =data[0].author;
            document.querySelector(".col-xs-6 #name").innerHTML =data[0].name;
            document.querySelector(".col-xs-6 #shijian").innerHTML =data[0].date;
            document.querySelector(".col-xs-6 #she").innerHTML =data[0].press;
            document.querySelector(".col-xs-6 #isb").innerHTML =data[0].isb;
//            document.querySelector(".col-xs-6 #qian").innerHTML =data[0].price;
            document.querySelector(".col-xs-6 #file").src =data[0].file;
            var html='';
            html+="<strong>友情价格</strong>:<span class='price' id='qian'>"+data[0].price+"</span>";
            $('#youq').html(html);
//            var html1='';
//            html1+="<img src='"+data[0].file+"'>";
//            $('#tp').html(html1);
        }

    })




    var q=0;
    var c=0;

    function gouwu() {
        var name=document.querySelector("#name").innerHTML;
        var price=document.querySelector("#qian").innerHTML;
        var file=document.querySelector("#file").src;
        c++;
        q++;
        s=c*price;
        console.log(file);
        $.ajax({
            type:'post',
            url:'gw.php',
            aysnc:true,
            dataType:'json',
            data:{
                name:name,
                price:s,
                file:file,
                quantity:q
            },
            success:function (data) {
                console.log(data);

            }
        })
    }

</script>
</html>